<!-- 查询记录 -->
<template>
    <div class="reportBill">
        <van-nav-bar :border="false" title="查询记录" left-arrow @click-left="onClickLeft"/>
        <img class="reportBillHead" src="@/assets/reports/reportBillHeadBg.png" alt="">
        <div class="content">
            <div class="item">
                <van-field v-model="phone" placeholder="请输入您的查询报告手机号" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/register/phoneIcon.png" alt="">
                    </template>
                </van-field>
            </div>
            <div class="item">
                <van-field v-model="idNo" placeholder="请输入查询身份证后六位" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/register/realnameIcon.png" alt="">
                    </template>
                </van-field>
            </div>
        </div>
        <div class="btn">
            <van-button class="submit" round :color="'#2184F8'" block @click="submit">立即查看</van-button>
        </div>
    </div>
</template>

<script>
import { NavBar , Field , Button } from 'vant';
import { ref, reactive, getCurrentInstance } from 'vue';
export default {
    components:{
        [NavBar.name]:NavBar,
        [Field.name]:Field,
        [Button.name]:Button,
    },
    setup() {
        const {proxy} = getCurrentInstance();
        const phone = ref(''); // 手机号
        const idNo = ref(''); // 身份证后六位
        const onClickLeft = () => history.back();
        // 查询
        const submit = () => {
            if(phone.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入查询的手机号'})
                return
            }
            if(phone.value.length != 11){
                proxy.$toast({position: 'bottom',message:'请输入正确的手机号'})
                return
            }
            if(idNo.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入查询的身份证号码后六位'})
                return
            }
            proxy.$http.brandApi.queryReportOrderDetails({consumerPhone: phone.value,consumerIdCard: idNo.value})
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    if(res.data != ''){
                        window.location.href = res.data;
                    }else{
                        proxy.$toast({position: 'bottom', message: '暂无数据'})
                    }
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        return {
            onClickLeft,
            phone,
            idNo,
            submit,
        };
    }
}

</script>
<style scoped>
.reportBill{
    background-image: url('../../assets/reports/billBg.png');
    background-color: rgba(242, 245, 252, 1);
    background-repeat: no-repeat;
    background-size: 100%;
    min-height: 100vh;
}
.reportBill /deep/ .van-nav-bar__content,.reportBill /deep/ .van-nav-bar{
    background: rgba(0, 0, 0, 0);
}
.reportBill /deep/ .van-badge__wrapper{
    color: #FFFFFF;
}
.reportBill /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}

.reportBillHead{
    width: 255px;
    height: 259px;
    margin: 0 60px;
    position: relative;
    z-index: 1;
}
.content{
    margin: -40px 12px 0;
    background: #FFFFFF;
    z-index: 99;
    position: relative;
    padding: 0px 15px 20px;
    border-radius: 8px;
}
.title{
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin-bottom: 7.5px;
    /* text-shadow: 3px 4px 3px rgba(255, 212, 0 ,.5); */
}
.item{
    /* flex: 1; */
    width: 100%;
    height: 75px;
    /* border-bottom: .5px solid #E0E0E0; */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 15px;
    /* padding-top: 13px; */
}
.item >>> .van-field{
    flex: 1;
    padding-left: 10px;
    max-height: 40px;
    background: none;
}
.item >>> .van-field__label{
    width: 18px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.FieldIcon{
    width: 18px;
    height: 18px;
    display: block;
}
/* .submit{
    margin-top: 45px;
} */
.btn{
    margin: 164px 12px 0;
    height: 50px;
}
</style>